import React from 'react';
import { Row, Col } from 'antd';
import cn from 'classnames';
import LinkTo from '@/components/LinkTo';

import styles from '../index.less';
import { fixNumber } from '../util';

const rankColor = [
    {
        label: '优',
        className: styles.rankGood
    },
    {
        label: '中',
        className: styles.rankMedium
    },
    {
        label: '差',
        className: styles.rankPoor
    },
    {
        label: '未评估',
        className: styles.rankNone
    }
];

const renderRankText = rank => {
    const { label = '', className = '' } = rankColor.find(item => item.label === rank) || {};
    return <div className={cn(styles.rankText, className)}>{label === '未评估' ? '无' : label}</div>;
};
const TopCard = ({ data = {}, query = {} }) => {
    const { areaCompanyWorkloadStatisticsVOList = [], productQualityStatisticsVOList = [] } = data;
    const companies = areaCompanyWorkloadStatisticsVOList.slice(0, 2);
    const products = productQualityStatisticsVOList.slice(0, 2);

    return (
        <Row className={styles.smallCard} gutter={24}>
            {companies.map(company => (
                <Col span={6}>
                    <div className={styles.cardItem} key={company.companyName}>
                        <div className={styles.cardItemTitle}>
                            <em>人均计划</em>
                            <p>{company.companyName}</p>
                        </div>
                        <div className={styles.cardItemContent}>
                            <div className={styles.cardItemContentLeft}>
                                <p>
                                    <em>{fixNumber(company.planPerCapitaStandardWorkloadNum, 0)}</em>小时
                                </p>
                            </div>
                            <div className={styles.cardItemContentRight} style={{ paddingLeft: 28 }}>
                                <p>
                                    不足
                                    <em>
                                        <LinkTo
                                            to="/stat/workStat/workOverview/work/employee"
                                            query={{ ...query, workloadFlag: 2, companyId: company.companyId }}
                                        >
                                            {company.planWorkloadLackPeopleNum}
                                        </LinkTo>
                                    </em>
                                    人
                                </p>
                                <p>
                                    占比
                                    <em>
                                        <LinkTo
                                            to="/stat/workStat/workOverview/work/employee"
                                            query={{ ...query, workloadFlag: 2, companyId: company.companyId }}
                                        >
                                            {company.planWorkloadLackRateStr.replace('%', '')}
                                        </LinkTo>
                                    </em>
                                    %
                                </p>
                            </div>
                        </div>
                    </div>
                </Col>
            ))}
            {products.map(product => (
                <Col span={6}>
                    <div className={styles.cardItem} key={product.productName}>
                        <div className={styles.cardItemTitle}>
                            <em>{product.productName}</em>
                            <p>上周</p>
                        </div>
                        <div className={styles.cardItemContent}>
                            <div className={styles.cardItemContentLeft}>
                                <p>
                                    <em>{fixNumber(product.score, 1)}</em>分
                                </p>
                            </div>
                            <div
                                className={styles.cardItemContentRight}
                                style={{ display: 'flex', justifyContent: 'center' }}
                            >
                                {renderRankText(product.rankName)}
                            </div>
                        </div>
                    </div>
                </Col>
            ))}
        </Row>
    );
};
export default TopCard;
